<template>
	<view class="home_container">
		<!-- 手机端顶部状态栏高度 -->
		<!-- #ifdef APP-PLUS -->
			<view class="status_bar"></view>
		<!-- #endif -->
		
		<!-- 头部搜索 -->
		<view class="head_wrapper">
			<!-- 搜索 -->
			<view class="search_left">
				<view class="search_box">
					<view class="hide_box" v-show="seachText.length == 0">
						<view class="search_hint" >
							<image src="/static/index/search.png" mode=""></image>
							<view>
								零基础逆袭英语学霸
							</view>
						</view>
					</view>
					<input type="text" v-model="seachText" />
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="history_right">
				<view class="top_icon">
					<image src="/static/index/history.png" mode=""></image>
				</view>
				<view class="history_text">
					历史
				</view>
			</view>
		</view>
		
		<!-- 导航栏 -->
		<view class="nav_wrapper">
			<view class="nav_item" v-for="(item, i) in navList" :key="i" :class="{active_item: i == navIndex}" @click="changeNavBar(i)">
				<view v-show="i == navIndex" class="active_bg"></view>
				{{item}}
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper_wrapper">
			<u-swiper height="320" :list="swiperList" mode="rect"></u-swiper>
		</view>
		
		<!-- 中间功能区 -->
		<view class="content_wrapper">
			<view class="item_box" v-for="i in contentList" :key="i.id">
				<view class="top_icon">
					<image :src="i.img" mode=""></image>
				</view>
				<view class="">
					{{i.text}}
				</view>
			</view>
		</view>
	
		<!-- 课程推荐标题 -->
		<view class="recommend_wrapper">
			<!-- 标题-左边 -->
			<view class="title_left">
				课程推荐
			</view>
			<!-- 查看更多-右边 -->
			<view class="more_right">
				<view class="">
					查看更多
				</view>
				<view class="more_icon">
					<image src="/static/index/left_back.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 课程推荐内容 -->
		<view class="recommend_content">
			<view class="recomment_item" v-for="i in 4" :key="i" @click="clickItem(i)">
				<!-- 头部主体区域 -->
				<view class="top_body">
					<view class="left_img">
						<image src="/static/index/bg1.png" mode=""></image>
					</view>
					<view class="right_content">
						<view class="top_title">
							零基础Java到高级安卓我士大夫的来访接待来访就
						</view>
						<view class="desc_info">
						 <view class="text">
						 	本篇Java学习指南系列的第9篇，安卓app开发的入门教程。涵
						 </view>
						</view>
					</view>
				</view>
				<!-- 底部浏览量/用户信息 -->
				<view class="bottom_info">
					<!-- 浏览量 -->
					<view class="browse_box">
						<view class="browse_icon">
							<image src="/static/index/browse.png" mode=""></image>
						</view>
						<view class="browse_num">
							61543
						</view>
					</view>
					<!-- 用户信息 -->
					<view class="user_info">
						<view class="user_icon">
							<image src="/static/index/user_icon.png" mode=""></image>
						</view>
						<view class="user_name">
							粥星星
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部继续观看弹窗 -->
		<u-popup v-model="popUpShow" mode="bottom" :mask="false" :mask-close-able="false">
			<view class="bottom_pop_up">
				<!-- 左边背景图 -->
				<view class="left_img">
					<image src="/static/index/bg5.png" mode=""></image>
				</view>
				<!-- 中间信息 -->
				<view class="center_info">
					<view class="info_title">
						三十分钟搞定PPT全套路地方的开发进度
					</view>
					<view class="info_time">
						<text>05:45</text>
						<text class="minute">/30:00</text>
					</view>
				</view>
				<!-- 右边观看按钮/关闭按钮 -->
				<view class="right_btn">
					<view class="continue_btn">
						继续观看
					</view>
					<view class="close_btn" @click="closePop">
						<image src="/static/index/close.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索内容
				seachText: "",
				// 导航栏
				navList: [
					"首页",
					"在线学院",
					"心理辅导",
					"线下学习",
				],
				// 导航索引
				navIndex: 0,
				// 轮播图
				swiperList: [
					"/static/index/sw1.png",
					"/static/index/sw1.png",
					"/static/index/sw1.png",
				],
				// 中间功能展示区
				contentList: [
					{
						id: 1,
						img: "/static/index/kp-icon.png",
						text: "科普知识"
					},
					{
						id: 2,
						img: "/static/index/ds-icon.png",
						text: "读书会"
					},
					{
						id: 3,
						img: "/static/index/fm-icon.png",
						text: "有识FM"
					},
				],
				// 课程推荐项目
				recommendList: [
					{}
				],
				// 弹窗控制显示隐藏
				popUpShow: false,
			};
		},
		methods: {
			// 切换导航
			changeNavBar(index) {
				this.navIndex = index;
			},
			// 点击课程
			clickItem() {
				this.popUpShow = true;
			},
			// 关闭弹窗
			closePop() {
				this.popUpShow = false;
			}
		}
	}
</script>

<style lang="less" scoped>
	// 手机端顶部状态栏高度
 /* #ifdef APP-PLUS */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
 /* #endif */
 
 .home_container {
	 padding: 90rpx 0 0rpx;
 }
 // 头部搜索
 .head_wrapper {
	 position: fixed;
	 top: 0;
	 z-index: 99999;
	 width: 100%;
	 padding: 12rpx 40rpx 12rpx 30rpx;
	 box-sizing: border-box;
	 display: flex;
	 justify-content: space-between;
	 background-color: #ffffff;
	 
	 // 搜索
	 .search_left {
		 width: 610rpx;
		 height: 65rpx;
		 .search_box {
			 width: 100%;
			 height: 100%;
			 position: relative;
			 .search_hint {
				 display: flex;
				 align-items: center;
				 font-size: 28rpx;
				 font-family: PingFang;
				 font-weight: 500;
				 color: #a5a7ac;
				 position: absolute;
				 top: 50%;
				 left: 50%;
				 transform: translate(-50%, -50%);
				 image {
					 margin-right: 10rpx;
					 width: 25rpx;
					 height: 25rpx;
				 }
			 }
			 input {
				 padding-left: 10rpx;
				 box-sizing: border-box;
				 width: 100%;
				 height: 100%;
				 background: #F3F3F3;
				 border-radius: 12rpx;
			 }
		 }
	 }
	
		// 历史记录
		.history_right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			font-size: 20rpx;
			font-weight: bold;
			color: #2F3541;
			.top_icon {
				width: 35rpx;
				height: 35rpx;
				image {
					width: 100%;
					height: 35rpx;
				}
			}
		}
 }

// 导航栏
.nav_wrapper  {
	display: flex;
	justify-content: space-between;
	width: 680rpx;
	margin: 0 auto;
	padding: 20rpx 0;
	box-sizing: border-box;
	color: #979aa0;
	font-size: 32rpx;
	font-weight: bold;
	.nav_item {
		transition: all .9;
	}
	.active_item {
		font-size: 36rpx;
		color: #2F3541;
		position: relative;
	}
	.active_bg {
		width: 100%;
		height: 16rpx;
		background: #FFE300;
		position: absolute;
		bottom: 0;
		z-index: -1;
	}
}

// 轮播图
.swiper_wrapper {
	width: 680rpx;
	height: 320rpx;
	margin: 0 auto;

	/deep/ .u-indicator-item-rect {
		width: 20rpx;
		height: 4rpx;
		background: #97baec;
		border-radius: 2rpx;
	}
	/deep/ .u-indicator-item-rect-active {
		width: 20rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}
}

// 中间功能区
.content_wrapper {
	width: 680rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	padding: 45rpx 0 80rpx 0;
	box-sizing: border-box;
	.item_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #201E1F;
		.top_icon {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 25rpx;
			image {
				width: 100%;
				height: 88rpx;
			}
		}
	}
}

// 课程推荐标题
.recommend_wrapper {
	width: 680rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// 标题
	.title_left {
		position: relative;
		font-size: 36rpx;
		font-weight: bold;
		color: #2F3541;
	}
	// 伪元素画圆
	.title_left::after {
		content: "";
		display: block;
		width: 32rpx;
		height: 32rpx;
		background: #FFE300;
		border-radius: 16rpx;
		position: absolute;
		right: -15rpx;
		top: -2rpx;
		z-index: -1;
		opacity: 0.7;
	}
	
	// 查看更多
	.more_right {
		font-size: 24rpx;
		font-weight: 500;
		color: #9A9DA7;
		display: flex;
		align-items: center;
		.more_icon {
			width: 11rpx;
			height: 18rpx;
			display: flex;
			align-items: center;
			margin-left: 5rpx;
			image {
				width: 100%;
				height: 18rpx;
			}
		}
	}
}

// 课程推荐内容
.recommend_content {
	// width: 700rpx;
	margin: 35rpx 0;
	.recomment_item {
		width: 100%;
		width: 680rpx;
		margin: 0 auto 25rpx;
		border-bottom: 1rpx solid #DDDDDD;
		// 头部主体区域
		.top_body {
			display: flex;
			justify-content: space-between;
			.left_img {
				width: 288rpx;
				height: 160rpx;
				image {
					width: 100%;
					height: 160rpx;
				}
			}
			.right_content {
				// margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				.top_title {
					width: 374rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #2F3541;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap
				}
				.desc_info {
					width: 374rpx;
					box-sizing: border-box;
					padding: 15rpx;
					background: #F6F6F5;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #545964;
					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
		
		// 底部浏览量/用户信息
		.bottom_info {
			margin-bottom: 40rpx;
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// 浏览量
			.browse_box {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #9A9DA7;
				.browse_icon {
					width: 28rpx;
					height: 22rpx;
					margin-right: 10rpx;
					display: flex;
					align-items: center;
					image {
						width: 100%;
						height: 22rpx;
					}
				}
			}
			// 用户信息
			.user_info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #545964;
				.user_icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					image {
						width: 100%;
						height: 40rpx;
					}
				}
			}
		}
	}
	// 最后一个没有下划线
	.recomment_item:last-child {
		border: none;
	}
}

// 底部继续观看弹窗
.bottom_pop_up {
	width: 750rpx;
	height: 155rpx;
	background: #FFFFFF;
	box-shadow: 0px -20rpx 30rpx 0px rgba(154, 157, 167, 0.2);
	padding: 0 30rpx 0 25rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	 /* #ifdef H5 */
	 bottom: calc(var(--window-bottom));
	  /* #endif */
	 
	// 左边背景图
	.left_img {
		width: 160rpx;
		height: 90rpx;
		border-radius: 15rpx;
		image {
			width: 100%;
			height: 90rpx;
		}
	}
	
	// 中间信息
	.center_info {
		flex: 1;
		margin-left: 25rpx;
		margin-right: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 330rpx;
		.info_title {
			font-size: 28rpx;
			font-weight: bold;
			color: #2F3541;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap
		}
		.info_time {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #2F3541;
			.minute {
				color: #9A9DA7;
			}
		}
	}
	
	// 右边观看按钮/关闭按钮
	.right_btn {
		display: flex;
		.close_btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 42rpx;
			height: 42rpx;
			background: #F6F6F5;
			border-radius: 0px 0px 0px 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 14rpx;
				height: 14rpx;
			}
		}
		.continue_btn {
			width: 140rpx;
			height: 50rpx;
			background: #FFE300;
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #2F3541;
			line-height: 50rpx;
			text-align: center;
		}
	}
}

</style>
